import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'


export default class Bar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sales: [38, 52, 61, 145, 48, 38, 28, 38, 68, 38, 58, 38],
        }
    }

    //返回柱状图的配置对象
    getOption = () => {
        const { sales } = this.state
        return {
            title: {
                text: 'React 柱形图',
                left: 20
            },
            tooltip: {},
            grid: {
                bottom: 20
            },
            legend: {
                data: ['月份']
            },
            xAxis: {
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisLabel: {
                    interval: 0, //设置文本标签全部显示
                    //rotate: 2, //如果内容重叠最好设置一下旋转，就不会重叠了
                    // formatter: function (value) { //如果再不行就用formatter自己来截取换行
                    //     return value;
                    // }
                }
            },
            yAxis: {},
            series: [
                {
                    name: '月份',
                    type: 'bar',
                    data: sales,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: '#00FFCC' }, // 渐变起始颜色
                                { offset: 1, color: '#66CCFF' }, // 渐变结束颜色
                            ],
                            global: false, // 使用局部渐变
                        },
                    },
                    label: {
                        show: true,
                        position: "top",  // 展示在柱子的上方
                        color: '#336666'
                    }
                }
            ]
        }
    }

    render() {
        return (
            <div style={{ width: '100%', marginLeft: -30,height:300 }}>
                <ReactEcharts option={this.getOption()} style={{ height: 300 }} />
            </div>
        )
    }
}
